<template>
	<div :class="mode">
		<div class="summary">
			<div class="summary-img">
				<img src="~/assets/imgs/image.png" alt="" />
			</div>
			<div class="summary-main">
				<div class="summary-main-title hover">供中国人选购参考！ 详尽说明如何查看包含阿里巴巴12312312312</div>
				<div class="summary-main-outline">Sakura Agency 正在陆续发布新功能 最受欢迎的功能之一是在 Sakura ...</div>
				<div class="summary-main-time"><span class="gray">更新时间：</span><span class="black">2025-02-03 15:20</span></div>
			</div>
		</div>
	</div>
</template>

<script setup>
	defineProps({
		mode: {
			type: String,
			default: 'pc',
		},
	});
</script>

<style lang="scss" scoped>
	/* 公共样式：图片填充满容器 */
	.summary-img img {
		width: 100%;
		height: 100%;
	}
	.pc,
	.mobile {
		cursor: pointer;
	}
	.pc {
		.summary {
			width: 274px;
			height: 340px;
			padding: 10px 7px 20px;
			border: 1px solid #e5e7eb;
			margin: 100px auto;
			border-radius: var(--guide-box-radius);
			transition: all 0.3s ease-in-out;
			&:hover {
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
				.hover {
					color: var(--guide-hover-text-color);
				}
			}
			.summary-img {
				width: 260px;
				height: 140px;
				margin-bottom: 8px;
			}
			.summary-main-title {
				width: 249px;
				margin-bottom: 10px;
				@include font(_, 18px, 30px, 500, var(--guide-normal-text-color));
				@include text-overflow(2);
			}
			.summary-main-outline {
				width: 249px;
				height: 60px;
				margin-bottom: 15px;
				background-color: #f6f7fb;
				@include font(_, 14px, 22px, 400, var(--guide-normal-text-color-gray));
				@include text-overflow(2);
				@include flex;
			}
			.summary-main-time {
				@include font(_, 12px, 20px, 400);
			}
		}
	}
	.mobile {
		.summary {
			width: 710px;
			height: 176px;
			padding: 20px 12px 26px 20px;
			border-radius: 10px;
			@include flex;
			// background-color: red;
			margin: 0 auto;
			.summary-img {
				width: 220px;
				height: 130px;
				border-radius: 8px;
				margin-right: 20px;
			}
			.summary-main {
				@include text-overflow();
				.summary-main-title {
					@include font(_, 28px, 36px, 400, var(--guide-normal-text-color));
					@include text-overflow();
				}
				.summary-main-outline {
					margin: 17px 0;
					@include font(_, 24px, 32px, 400, var(--guide-normal-text-color-gray-stronger));
					@include text-overflow();
				}
				.summary-main-time {
					@include font(_, 20px, 28px, 400, var(--guide-normal-text-color-gray-stronger));
				}
			}
		}
	}
</style>
